<template>
  <div class="hotCity">
      <p>热门城市</p>
      <div class="citys">
          <span v-for="item in cityName" :key="item.index">
            {{item}}
          </span>
      </div>
      <div class="region" v-for="item in region" :key="item.index">
          <p>{{item.id}}</p>
          <ul>
              <li>{{item.regionName01}}</li>
              <li>{{item.regionName02}}</li>
              <li>{{item.regionName03}}</li>
          </ul>
      </div>
  </div>
</template>

<script>
export default {
    name:'hot-city',
    data(){
        return{
            cityName:["北京","上海","天津","合肥","郑州"],
            region:[
                {
                    id:"A",
                    regionName01:'阿克苏',
                    regionName02:'安康',
                    regionName03:'安庆'
                },
                {
                    id:"B",
                    regionName01:'白山',
                    regionName02:'白城',
                    regionName03:'宝鸡'
                },
                {
                    id:"C",
                    regionName01:'沧州',
                    regionName02:'长春',
                    regionName03:'昌吉'
                },
                {
                    id:"D",
                    regionName01:'大理',
                    regionName02:'大连',
                    regionName03:'大庆'
                },
                {
                    id:"E",
                    regionName01:'鄂尔多斯',
                    regionName02:'恩施',
                    regionName03:'鄂州'
                },
            ]
        }
    }
}
</script>

<style>
.hotCity{
    background:rgba(145, 216, 245,0.3);
}
.hotCity .citys{
    background:#fff5f0;
}
.hotCity p{
    width:100%;
    height:30px;
    line-height:30px;
    font-weight:bold;
    margin-left:10px;
}
.hotCity .citys span{
    display: inline-block;
    width:100px;
    height:30px;
    line-height:30px;
    text-align:center;
    border:1px solid rgba(128, 128, 128,0.3);
    margin:10px;
    font-weight:bold
}
.hotCity .region ul{
    background:#fff5f0;
    height: 120px;
    border:1px solid white;
}
.hotCity .region ul li{
    width:100%;
    height:30px;
    line-height:30px;
    margin-left:10px;
}
.hotCity .region ul li:nth-of-type(1){
    margin-top:10px;
}
</style>